<template>
	<view class="release-list">
		<!-- 我的发布 -->
		<view class="mine-release">
			<view class="mine-release-header">
				<view class="mine-release-left">
					<view class="mine-release-icon">
						<view class="iconfont" :class="titleIcon"></view>
						<!-- <u-image width="50" height="50rpx" :src="titleIcon"></u-image> -->
					</view>
					<view class="release-title">{{ title }}</view>
				</view>
				<view class="mine-release-right">
					<view class="release-num">{{ totalCount > 0 ? totalCount : '' }}</view>
					<view class="arrow-right">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
			<view class="release-list">
				<scroll-view class="scroll-release-list" scroll-x="true" @scrolltolower="handleScrolltolower">
					<view class="release-item" v-for="(sign, index) in dataList" :key="index" :class="{noPic: !coverImg(sign.signPic)}" @click.stop.prevent="handleToDetail(sign)">
						<view v-if="coverImg(sign.signPic)"  class="release-image">
							<u-image width="100%" height="200rpx" mode="aspectFill" :src="coverImg(sign.signPic)"></u-image>
						</view>
						<view class="release-content">
							<view class="signWord">{{ sign.signWord }}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {

		props: {
			title: {
				type: String,
				default: '我的发布'
			},
			titleIcon: {
				type: String,
				default: 'icon-tupian'
			},
			dataList: {
				type: Array,
				default: () => ([])
			},
			totalCount: {
				type: [Number, String],
				default: 0
			}
		},

		data() {
			return {
				defaultAvatar: require('@/static/user/default-avatar.png')
			}
		},
		
	

		methods: {
			
			coverImg(imgList) {
				return imgList ? JSON.parse(imgList)[0] : ''
			},
			
			// 点击进入详情页面
			handleToDetail(target) {
				uni.navigateTo({ // userSignRecordId
					url: `/pages/insidePages/releaseDetails/index?userSignRecordId=${target.userSignRecordId}`
				})
			},
			
			// 滚动到右侧
			handleScrolltolower(e) {
				this.$emit('scrolltolower')
			}
		}
	}
</script>

<style lang="scss">
	// 我的发布
	.mine-release {
		margin: 0 auto;
		padding: 0 40rpx;

		.mine-release-header {
			display: flex;
			justify-content: space-between;
			margin-bottom: 24rpx;

			.mine-release-left {
				display: flex;
				flex: 1;
				align-items: center;

				.mine-release-icon {
					margin-right: 16rpx;

					.iconfont {
						font-size: 40rpx;
					}
				}
			}

			.mine-release-right {
				display: flex;
				flex: 1;
				justify-content: flex-end;
				text-align: right;

				.release-num {
					margin-right: 16rpx;
				}
			}
		}
	}

	// 发布列表
	.scroll-release-list {
		width: 100%;
		// display: flex;
		// align-items: flex-start !important;
		// flex-direction: row;
		white-space: nowrap;

		.release-item {
			margin-right: 16rpx;
			width: 370rpx;
			height: 326rpx;
			display: inline-block;
			background-color: #fff;
		
			&:last-child{
				margin-right: 0;
			}
		
			.release-image {
				height: 250rpx;
				margin-bottom: 12rpx;
				overflow: hidden;
				border-top-left-radius:15rpx;
				border-top-right-radius:15rpx;
			}
		
			.release-content {
				height: 96rpx;
				display: -webkit-box;
				overflow: hidden;
				margin: 0;
				font-size: 24rpx;
				
				.signWord {
					width: 100%;
					overflow: hidden;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
					text-overflow: ellipsis;
					white-space: initial !important;
					font-size: 24rpx;
				}
			}
			
		}
		.noPic {
			border-radius: 8rpx;
			position: relative;
			background-color: #FEB663;
			border-radius: 8rpx;
			margin-right: 16rpx;
			width: 48.5%;
			display: inline-block;
			
			.release-content {
				height: 360rpx;
				flex-grow: 1;
				padding: 60rpx 24rpx;
				text-align: center;
				box-sizing: border-box;
				font-size: 24rpx;
				
				.signWord {
					width: 100%;
					overflow: hidden;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 8;
					text-overflow: ellipsis;
					white-space: initial !important;
					font-size: 24rpx;
				}
			}
		}
	}
</style>
